<template>
   <h3>ComponentB</h3>
   <p>{{ title }}</p>
   <p>{{ age }}</p>
   <p v-for="(item, index) of names">{{ item }}</p>
   <button @click="updateHandle">修改数据</button>
</template>

<script>
import { callWithAsyncErrorHandling } from 'vue'

export default {

   data() {
      return {

      }
   },
   // props:["title"]
   //警告props是只读的
   props: {
      title: {
         type: [String, Number, Array, Object],
         required: true
      },
      age: {
         type: Number,
         default: 0
      },
      //数字和字符串可以直接default,但是如果是数组和对象，必须通过工厂函数返回默认值
      names: {
         type: Array,
         default() {
            return ["空"]
         }
      }

   },
   methods: {
      updateHandle() {
         //错误修改 警告props是只读的
         this.title="新数据"
      }
   }
}
</script>